<template>
  <div class="dra_box">
    <transition name="el-zoom-in-bottom">
      <div v-show="display" class="dra_bottom_box">
        <div class="dra_head">
          <div class="title">控制台</div>
          <div class="head_icons">
            <!-- <i class="el-icon-s-open" @click="clearButton"></i> -->
            <img
              class="reload-btn"
              src="@/assets/reload-btn.png"
              @click="reload"
            />
            <img
              @click="clearButton"
              class="clear-btn"
              src="@/assets/clear-btn.png"
              alt="404"
            />
            <img
              @click="closeButton"
              class="close-btn"
              src="@/assets/close-btn.png"
            />

            <!-- <i class="el-icon-close" @click="closeButton"></i> -->
          </div>
        </div>
        <div class="content" id="dataList">
          <slot />
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    // 是否打开
    display: {
      type: Boolean,
      default: false,
    },
    websock: {
      type: Object,
      default: () => {},
    },
  },

  mounted() {},
  methods: {
    reload() {
      this.websock.close();
      this.websock.socketInit('ws://' + location.host + process.env.VUE_APP_SIDDHI_WS_API +'/console');
    },
    closeButton() {
      // this.$emit("update:display", false);
      this.$store.dispatch("siddhi/setConsoleState", false);
    },
    clearButton() {
      // this.$store.dispatch("siddhi/setLogData", null);
      this.$store.commit("siddhi/CLEAR_LOG_DATA");
    },
  },
};
</script>
<style lang="scss" scoped >
.dra_box {
  position: relative;
  background-color: #fff;
  z-index: 10;
  .dra_bottom_box {
    margin-left: 1px;
    height: 230px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    /* padding: 0 10px 50px 10px; */

    .content {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 14px;
      padding: 0 10px;
      padding-bottom: 30px;
      background-color: #fff;
    }
    .dra_head {
      height: 34px;
      width: 100%;
      background-color: #e9e9e9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;

      .title {
        font-size: 20px;
      }
      .head_icons {
        display: flex;
        align-items: center;
        .clear-btn {
          height: 16px;
          width: 14px;
          margin-left: 10px;
          cursor: pointer;
        }
        .close-btn {
          height: 12px;
          width: 12px;
          margin-left: 10px;
          cursor: pointer;
        }
        .reload-btn {
          height: 14px;
          width: 14px;
          cursor: pointer;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>

